<template>
  <el-dialog
      :model-value="props.dialogVisible"
      :title="props.dialogCgTitle"
      width="35%"
      @close="handleClose"
  >
    <el-col class="inline-flex " style="padding-bottom: 20px; width: 100%">
      <el-button size="large" type="primary" @click="selectTrpInfo(form.nydjzh)" :disabled="disable">查询投入品信息</el-button>
    </el-col>
    <el-form size="default" :model="form" ref="formRef" label-width="130px" :rules="rules" label-position="left" >
      <el-form-item label="投入品登记证号" prop="nydjzh">
        <el-input v-model.trim="form.nydjzh" clearable placeholder="例：PD20111153"/>
      </el-form-item>
      <el-form-item label="投入品名称" prop="trpmc">
        <el-input v-model.trim="form.trpmc" clearable/>
      </el-form-item>
      <el-form-item label="生产商" prop="nyscz">
        <el-input v-model.trim="form.nyscz" clearable/>
      </el-form-item>
      <el-form-item label="作物范围" prop="nyzw">
        <el-input v-model.trim="form.nyzw" clearable/>
      </el-form-item>
      <el-form-item label="防治对象" prop="nyfz">
        <el-input v-model.trim="form.nyfz" clearable/>
      </el-form-item>
      <el-form-item label="使用方法" prop="nysyfa">
        <el-input v-model.trim="form.nysyfa" clearable/>
      </el-form-item>
      <el-form-item label="采购来源" prop="ly">
        <el-input v-model.trim="form.ly" clearable/>
      </el-form-item>
      <el-form-item label="规格" prop="trpgg">
        <el-input v-model.trim="form.trpgg" clearable/>
      </el-form-item>
      <el-form-item label="采购数量" prop="cgsl">
      <el-input v-model.trim="form.cgsl" clearable/>
      </el-form-item>
      <el-form-item label="经手人" prop="jsr">
        <el-input v-model.trim="form.jsr" clearable/>
      </el-form-item>
      <el-form-item label="备注" prop="bz">
        <el-input v-model.trim="form.bz" clearable/>
      </el-form-item>
      <el-form-item label="采购日期" prop="rq">
        <el-date-picker
            v-model="form.rq"
            type="date"
            placeholder="选择日期"
            :size="'default'"
            clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, ref, defineProps, watch, onMounted} from 'vue'
import {djzhInfo} from "@/api/apiPath/twoPart.js";
import {ElNotification} from "element-plus";
import {get} from "@/utils/axiosMethod.js";

const props = defineProps({
  dialogCgTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogCgTableValue: {
    type: Object,
    default: {}
  },
  queryForm: {
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})

const formRef = ref(null)

const form = ref({
  nydjzh: '',
  trpmc: '',
  nyscz: '',
  nyzw: '',
  nyfz: '',
  nysyfa: '',
  ly: '',
  trpgg: '',
  cgsl: '',
  jsr: '',
  bz: '',
  rq: '',
})
onMounted(()=> {
  form.value = props.dialogCgTableValue
})
const disable = ref(true)
const regex = /^(?!\s*$).+/
watch(()=> form.value.nydjzh, (nydjzh)=> {
  console.log(nydjzh)
  disable.value = !regex.test(nydjzh)
  if (nydjzh === null || typeof nydjzh === "undefined") {
    disable.value = true
  }
}, {deep: true, immediate: true})

const rules = ref({
  trpmc: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  nydjzh: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  ly: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const emits = defineEmits(['update:modelValue', 'handleConfirm'])
const handleClose = ()=> {
  emits('update:modelValue', false)
}
const handleConfirm = () => {
  emits("handleConfirm", {...form.value}, {...formRef.value})
}
const selectTrpInfo = async (nydjzh) => {
  try {
    if (nydjzh === null) return null
    get(djzhInfo(nydjzh), (data)=> {
      console.log(data)
      if (data === null) return null
      form.value = data
    })
  } catch (err) {
    console.log("ErrorselectTrpInfo" + err)
    ElNotification({
      message: "请求失败~",
      type: 'error',
      duration: 1500
    })
  }
}

</script>

<style scoped>

</style>


















<!--
const selectTrpInfo = async (nydjzh) => {
try {
let res = await djzhInfo(nydjzh)
// console.log(res)
form.value = res.data
} catch (err) {
console.log("ErrorselectTrpInfo" + err)
ElNotification({
message: "请求失败~",
type: 'error',
duration: 1500
})
}


}-->
<!--      <el-form-item  v-for="(item, index) in addPurchaseInfo" :label="item.label" :prop="item.prop">
        <template v-if="item.prop === 'trpmc'">
&lt;!&ndash;          <el-input v-model="form[index]" size="large" disabled/>&ndash;&gt;
          <el-select v-model="form[index]"  placeholder="请选择" size="default">
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </template>
        <template v-else-if="item.prop === 'rq'">
              <el-date-picker
                  v-model="form[index]"
                  type="date"
                  placeholder="选择日期"
                  :size="'large'"
                  clearable
              />
        </template>
        <template v-else>
          <el-input v-model="form[index]" size="default" clearable/>
        </template>
      </el-form-item>-->